<template>
    <div class="comment-main">
        <h4>发表评论</h4>
        <textarea placeholder="请输入你要吐槽的内容" maxlength="120"></textarea>
        <mt-button type="primary" size="large">点击发表</mt-button>
            <div class="com-list">
               <div class="com-items" v-for="(items,i) in commentList" :key="items.add_time">
                    <p class="com-title">
                        第{{i+1}}楼&nbsp;&nbsp; 用户 ：{{items.user_name}}  发表时间 ：{{items.add_time}} 
                    </p>
                    <p class="com-body">
                        {{items.content === undefined ?"他没发":items.content}}
                    </p>
               </div>
               <!-- items -->
            </div>


        <mt-button type="danger" size="large" plain @click="add">更多内容</mt-button>

    </div>
</template>
<script>
export default {
    data() {
        return {
            idnex:1,
            commentsList:[]
        }
    },
    created(){
          this.getcommentList();
    },
    methods:{
       getcommentList(){
this.$http.get(`api/getcomments/${this.nid}?pageindex=${this.index}`).then(result=>{
            this.commentsList=this.commentsList.concat(result.body.message);
})
       },
       add(){
          this.index++;
           this.getcommentList()

       }
    },
    props:["nid"]
}
</script>
<style lang="scss" scoped>
    .com-list{
        margin-top: 10px;
        .com-items{
            margin-bottom: 8px;
            width: 100%;
            border-bottom: 1px solid #999;
            .com-title{
                background: #ccc;
                padding: 8px;
            box-sizing: border-box;
            color: #333;
            font-size: 12px;



            }
        }
    }
</style>